<!--送货员端送货清单-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">配送员端</el-breadcrumb-item>
    <el-breadcrumb-item>配送历史</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="card_search">
    <el-input
        v-model="queryInfo.cardAccount"
        class="search"
        size="large"
        placeholder="Search..."
        @blur="getOrderList"
    />
    <img src="@/assets/imgs/home/search.png" alt="" @click="getOrderList" style="width: 0.4rem; background-color: rgb(75,66,49); cursor: pointer;">
  </div>

  <el-table :data="carList"
            class="table"
            :header-cell-style = "headerStyle"
            :cell-style = "cellStyle"
            :key="carList.oid"
  >
    <el-table-column prop="numbering" label="订单号" />
    <el-table-column prop="userName" label="昵称" />
    <el-table-column prop="telephone" label="手机号" />
    <el-table-column prop="address" label="地址" show-overflow-tooltip/>
    <el-table-column prop="status" label="订单状态" />
    <el-table-column prop="orderTime" label="完成时间" />
  </el-table>
  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
  />
</template>

<script setup>
// 渲染
import {getCurrentInstance, onMounted, reactive, ref} from "vue";

const {proxy} = getCurrentInstance()
const total = ref(0)
const queryInfo = reactive({
  status: 1,
  currentPage: 1,
  pageSize: 10
})

const carList = reactive([])

onMounted(() => {
  getOrderList()
})

// 修改el-table默认样式
const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}

const cellStyle = () => {
  return {
    'background-color':'rgb(193,149,84)',
    'color': 'white',
    'text-align': 'center'
  }
}

// 获取配送历史订单
const getOrderList = async () => {
  const {data: res} = await proxy.$http.WarehouseService.getOrder(queryInfo)
  console.log(res)
  if (res.code !== 200) return proxy.$message.error('获取已下单订单数据失败')
  carList.length = 0
  for (let i= 0; i< res.data.length; i++) {
    carList.push(res.data[i])
  }
  console.log(carList)
  total.value = res.data[0].totalPages
}

// 根据分页器切换每页的菜品
const handleCurrentChange = val => {
  queryInfo.currentPage = val
  getOrderList()
}
</script>

<style scoped lang="scss">
.search{
  width: 25%;
  margin-left: 55%
}
.card_search{
  height: auto;
  display: flex;
}

:deep(.search .el-input__wrapper) {
  background-color: rgb(193,149,84)
}

:deep(.search .el-input__inner) {
  color: white
}

:deep(.el-input__inner) {
  &::placeholder{
    color: white;
    font-size: 16px
  }
}

:deep(.search .el-icon) {
  color: white;
}

.table {
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: 50px;
}
:deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 20px;
}
:deep(.el-table__body .el-button){
  border: 1px solid white;
  background-color: rgb(193,149,84);
}
:deep(.el-table__body .el-button:hover){
  color: rgb(193,149,84);
  background-color: white !important;
}
:deep(.el-table__body .el-table__expand-icon){
  color: white;
}

.el-pagination{
  position: absolute;
  right: 8%;
  bottom: 2%
}
</style>

